<template>
<div class="intro">
    <div class="intro__inner">
        <div class="intro-headlines">
            <div class="is-large1">NO 1</div>
        </div>
        <div class="intro-headlines">
            <div class="is-large2">TikToker</div>
        </div>
        <div class="intro-headlines"> 
            <div class="is-large3">Actor</div>
        </div>
        <div class="intro-headlines">
            <div class="is-large4">Icon</div>
        </div>
        <div class="intro-headlines">
            <div class="is-large5">ITALIAN</div>
        </div>
    </div>
</div>
</template>

<script setup>
import { onMounted } from "vue";
import { gsap } from "gsap";
// import ScrollTrigger from "gsap/ScrollTrigger";
import { ScrollTrigger } from "gsap/all";

onMounted(() => {
    gsap.registerPlugin(ScrollTrigger)
    const tl = gsap.timeline({
        scrollTrigger: {
            trigger: ".intro",
            start: "top top",
            end: "bottom bottom",
            scrub: 1
        }
    })
    tl.fromTo(".is-large1", {'transform': 'skewY(0deg) rotateY(0deg)', opacity: 0}, {'transform': 'skewY(10deg) rotateY(60deg)', opacity: 1, duration: 6});
    tl.fromTo(".is-large2", {'transform': 'skewY(0deg) rotateY(0deg)', opacity: 0}, {'transform': 'skewY(10deg) rotateY(60deg)', opacity: 1, duration: 6}, "-=4");
    tl.fromTo(".is-large3", {'transform': 'skewY(0deg) rotateY(0deg)', opacity: 0}, {'transform': 'skewY(10deg) rotateY(60deg)', opacity: 1, duration: 6}, "-=4");
    tl.fromTo(".is-large4", {'transform': 'skewY(0deg) rotateY(0deg)', opacity: 0}, {'transform': 'skewY(10deg) rotateY(60deg)', opacity: 1, duration: 6}, "-=4");
    tl.fromTo(".is-large5", {'transform': 'skewY(0deg) rotateY(0deg)', opacity: 0}, {'transform': 'skewY(10deg) rotateY(60deg)', opacity: 1, duration: 6}, "-=4");
})

</script>

<style scoped>
.intro {
    display: flex;
    justify-content: center;
    pointer-events: none;
    color: #fff;
    display: flex;
    width: 100%;
    height: 150vh;
    background: #000;
    padding-top: 300px;
}
.intro-headlines {
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
.is-large1, .is-large2, .is-large3, .is-large4, .is-large5 {
    font-size: 140px;
    font-weight: 700;
    line-height: 120px;
    opacity: 0;
    width: 100%;
    text-align: center;
}
</style>